<template>
  <div class="swiper-container">
    <el-carousel
      trigger="click"
      :style="{ height: height + 'px', width: width + 'px' }"
    >
      <el-carousel-item v-for="item in bannerList" :key="item.id">
        <el-image
          :src="item.imgUrl"
          alt=""
          :preview-src-list="[item.imgUrl]"
        ></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'Swiper',
  data () {
    return {}
  },
  props: {
    // 轮播图的高
    height: {
      type: [String, Number],
      default: 150
    },
    // 轮播图的宽
    width: {
      type: [String, Number],
      default: 150
    },
    // 轮播图数据
    bannerList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  components: {},
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="less">
.swiper-container {
  /deep/ .el-carousel__container {
    height: 100%;
  }
  .el-image {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
}
</style>
